Hello and welcome to this lecture.
In this lecture or we are going to create the stylin for our quiz.
Use the C S S.
So this is the hastier male quiz.
So we're going to use some of the high.
These aren't classes defined for this history of mail document to style a quiz.
So let me switch to my CSM So this is a blank.
He says we don't need that Dels just a label.
So the time know what file this is.
So this is where I will be creating the styling for the quiz.
The way is going to work so that this lecture doesn't take too much time.
I will pre write the code add the code and then explain it so enough to watch me type all the time.
I have had some code here like one.
Basically I am using the import.
Basically what this is I am going to use this font font called Rocket font family called Rocket and
I'm getting that from Google.
Well that's where I'm seeing here.
Get this font from Google so you have to import it before you can use it so that's what I've done in
line one line two is the selector that I am going to be styling.
So basically saying he hates one which is the heading.
These are the stylin I am playing to it.
The font family B is in the rocket from Google and I've also got a substitute font called serif.
So if the rocket is not available it'll default to the second option.
Always good to specify a more than one font when you are declaring a font family property line for is
a text a line property where I want a text to be centred.
Land 5 is a caller have set and views a hex value.
Line 6 is basically the size of the font.
Or did text for that.
He wants Selecta I have added another channel coff code from line 8 to line 21 line.
It is a u l selector which means on ordered list so the stylin I'm giving it to is that I don't want
any.
That is no.
But let's not think that's what that means.
Lists.
Property.
I've said that to non So dobbyn on no ring or no bullets for that or not the list items line 11 to 15
is the actual I list which is this.
You use the airline to list the items.
Right so the airline selector specified a fun family of four rocket serif font size of two.
You can use em or you can use pixels colour.
I've said that to a house value line 16 to 20.
Is he employed so low to wear their type.
Is a radio so when you send them the questions you need to select which of the radio buttons.
So I've said that too.
So the properties are loose when the body says it is zero pixels they with 28 pixels height.
And I use MS here so you can use pixels if you like but you can if you it depends on which ones you
are comfortable with.
Of pixels you can use either.
I have had some more style in here from line 12 3 to 35.
So our start with line 23 to 25 years so that the abuse in dippie select or hear the piece the logos
were all styling and this stylin have applied to the font family is going to use rocket serif with be
the substitute front line.
26 is a comment that's how you will specify a comment in CSA.
So that line of code will be ignored because it is a comment line.
27 is a class so that is a class called Kiwis container.
So the the.
This diamine from 20 to 30 for giving a background colour.
Using the hex value the board radios property have said to it big source.
Body radios is what gives the car like rounded corner the width.
I've sent the set to 75 percent so it would be 7 tapped 75 percent off the pier ENT container.
So whatever.
Until now the the acquis container is in.
It will take 75 percent of the width of that container.
That's what that means.
Again you could use pig saws if you are more comfortable with picky sorts.
I am 31 is a margin of sedita or 2 which means it will automatically centre the container.
Okay told is centreing on the page.
That's what I meant.
Margin from the top in the from the top.
I want it to move down a hundred and ninety pixels.
The padding margin is the space outside while padding is Espy's inside the element.
So I've set them to heart 190 pixels at 5 pixels respectively.
The position I have set the position to relative.
I have had decades so more propertys and their values lie felt he'd added a class cord next button.
So does stylin I have used for the next botin class.
I start like 39 which is a border radius.
I've said that to 6 pixels with a hundred and fifty pixels height 40 pixels.
TEXT kaline have said it was Centre.
I won a bullet in to be Centre bag runkel are set to use the hex value again.
You can use the kolok name if you know the column name by fairlie's okay as well here.
44 is just a comment.
So that code will be ignored.
Ly in 45 is a colour which refers to the colloguing actual text.
Forty six is ifone family again amusin rockets antsier if 47 the font weight it refers to a horrific
thought.
How thick the front would be.
Who said that to board position.
I said it to a relative margin to auto padding from the top 20 pixels.
Okay I can get rid of 44 hours using a lap for a test.
If you think so and get rid of that done.
Now I have added on another class which is what is called Question from line 51 to 6 to all one.
So I've already gone through some of this property is with previous stylin on this file so I'm not going
to go too deep because I'll just be repeating myself.
So a lot of this dialogue we have used before so is just the same theme height weight and saw.
So I'm not going to run through that because I've done that with the class I have added on another class
yet chord with message and these are the stylin I give given that class.
Again I'm not going to run through it because the same thing like I've done before with the other classes
so basic The only difference here.
Here I've not used the hex value I've used the actual caller name.
I have added a couple more classes like 70 to 75 is the choice list class.
So that's obviously where you make your selection for the quiz answers.
So again similar thing.
The only difference here the font family slightly different views kuria and serif carlaw have said to
blue violet again 77 to 86.
There's another class called result the values of propertys values specified are self explanatory is
similar to what we've gone before in this in this lechon for this farm.
Okay.
So again ideally we'd hide everything we've mentioned before.
Boy was there any part of this lecture you're not familiar with or you're not sure anybody styled it.
Please feel free to let me know.
Ha be more than happy to explain further.
So I will just save this document and then we can review how a page and see what the document looks
like after the stylin have been a.
So this is what the page looks like the moment when we are doing our job as group series are well then
I use javascript to make it more interactive so that's set for this election.
Thanks for watching.
Bye for now.